<template>
  <view class="area-setting">
    <view class="area-list">
      <view
          v-for="item in areaList"
          :key="item.key"
          class="area-item"
          @click="editArea(item)"
          @longpress="openMoreAction(item)">
        <view class="area-name-box">
          <image class="area-picture" :src="item.picturePath" mode="aspectFill"></image>
          <view class="area-name">{{ item.name }}</view>
        </view>
      </view>
    </view>
    <view v-if="projectInfo.canEdit" class="page-bottom-btn" @click="addArea()">新增区域</view>
    <uni-popup ref="popup" type="bottom">
      <view class="delete-btn" @click="deleteArea()">删除区域</view>
    </uni-popup>
  </view>
</template>

<script>
import { getImagePath } from '@/utils/index.js'
export default {
  name: 'area-setting',
  props: {
    projectInfo: {
      type: Object
    }
  },
  data() {
    return {
      areaList: [],
      targetArea: null
    }
  },
  methods: {
    initData() {
      if (this.projectInfo?.id) {
        this.getProjectArea()
      }
    },
    getProjectArea() {
      const self = this
      uni.request({
        url: '/project_area/list',
        data: {
          xm_id: this.projectInfo.id
        },
        success(result) {
          if (result.data.success && Array.isArray(result.data.data)) {
            const arr = []
            result.data.data.forEach(item => {
              const areaItem = {
                key: item.id,
                id: item.id,
                name: item.name || '',
                picturePath: getImagePath(item.pic) || '/static/image/default-picture.png'
              }
              arr.push(areaItem)
            })
            self.areaList = arr
          }
        },
        complete() {
          uni.stopPullDownRefresh()
        }
      })
    },
    addArea() {
      if (!this.projectInfo.canEdit) return
      uni.navigateTo({
        url: `/pages/settings/add-area/add-area?projectId=${this.projectInfo.id}&canEdit=${this.projectInfo.canEdit}`
      })
    },
    editArea(targetArea) {
      uni.navigateTo({
        url: `/pages/settings/add-area/add-area?projectId=${this.projectInfo.id}&canEdit=${this.projectInfo.canEdit}&areaId=${targetArea.id}`
      })
    },
    openMoreAction(targetArea) {
      if (!this.projectInfo.canEdit) return
      this.targetArea = targetArea
      this.$refs.popup.open()
    },
    deleteArea() {
      const self = this
      if (!self.targetArea) return
      this.$refs.popup.close()
      uni.request({
        url: '/project_area/del',
        data: {
          id: self.targetArea.id
        },
        success(result) {
          if (result.data.success) {
            self.getProjectArea()
            uni.showToast({
              icon: 'success',
              title: '删除成功'
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.area-setting {
  padding-bottom: 100rpx;
}
.area-list {
  display: grid;
  grid-template-columns: repeat(2, 335rpx);
  grid-gap: 30rpx 20rpx;
}
.area-item {
  background-color: $white;
  border-radius: 10rpx;
  overflow: hidden;
}
.area-name-box {
  .area-picture {
    display: block;
    width: 335rpx;
    height: 250rpx;
  }
  .area-name {
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    height: 80rpx;
    font-size: $font-size-4;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.delete-btn {
  background-color: $danger;
  color: $white;
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
  font-size: $font-size-4;
}
</style>
